<!DOCTYPE html>
<html>
<head>
<title>Dataroad流程设计器</title>
<meta name="description" content="" />
<!-- Copyright 1998-2016 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
    <script src="js/jquery/jquery.min.js"></script>
    <script src="js/layer/layer.js"></script>
    <script src="js/go.js"></script>
    <script src="js/flow-desinger.js"></script>
    <script src="js/flow-display.js"></script>
    <link rel="stylesheet" href="js/layui/css/layui.css">
    <script src="js/layui/layui.js"></script>
</head>
<body>
<!--<div id="sample" style="width:90%;margin: 0 auto">-->
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">Dataroad控制台</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <!-- 移动端显示 -->
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>

            <li class="layui-nav-item layui-hide-xs"><a href="index.html">首页</a></li>
            <li class="layui-nav-item layui-hide-xs"><a href="designer.html">流程设计</a></li>

        </ul>
    </div>

    <div class="layui-container">
        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                <ul class="layui-nav " lay-filter="test">
                    <div id="myPaletteDiv" style="height: 600px"></div>
                </ul>
            </div>
        </div>
    </div>


    <div class="layui-body">
        <div style="padding: 15px;">
            <!-- 内容主体区域 -->
            首页 > 流程设计 <span id="jobFlowId"></span>
            <div class="layui-tab">
                <ul class="layui-tab-title">
                    <li class="layui-this">设计面板</li>
                    <li>源码面板</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <div id="myFlowDesignerDiv" style="border: solid 1px black; height: 500px"></div>
                    </div>
                    <div class="layui-tab-item">
                             <textarea id="jsonModel" style="width:99%;height:500px">
                             </textarea>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-footer">
            <!-- 底部固定区域 -->
            <button id="saveDesigner" class="layui-btn" onclick="saveDesigner()" >保存</button>
            <button id="showFlowJson" class="layui-btn" onclick="showJobFlowJson()">查看JSON流程</button>
        </div>
        </div>
</div>


    <div style="display: none" id="editContent">
        <form class="layui-form" action="" lay-filter="editContentForm" id="editContentForm" style="width:90%;" >
            <div style="padding: 15px;">
                <div id="editContentFormBaseContent" >
                </div>
                <div id="editContentFormParameterContent" >
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block" >
                    <button id="editFormBtn" class="layui-btn"  lay-submit="" lay-filter="desingerform">确定</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    <!--<button id="closeFormBtn" class="layui-btn layui-btn-primary" onclick="doCloseForm()">关闭</button>-->
                </div>
            </div>
        </form>

    </div>

    <div style="display: none" id="showJsonContent">
         <textarea id="showJsonTextarea" style="width:99%;height:500px">
         </textarea>
    </div>


</div>
</body>
<script type="text/javascript">
    window.url = "";
    var id = getQueryString('id');
    var areaFlow = document.getElementById('jsonModel');
    // 流程图设计器
    var  myDesigner= new FlowDesigner('myFlowDesignerDiv');
    myDesigner.initToolbar('myPaletteDiv');// 初始化控件面板

    if(id){
        $("#jobFlowId").html(" > " + id + "");
        $.ajax({
            url: window.url + "api/jobflowconfig/" + id ,
            type:"get",
            contentType:'application/json',
            success:function(data){
                // layer.msg("获取数据成功" );
                // myDesigner.displayFlow(areaFlow.value);// 在设计面板中显示流程图
                myDesigner.displayFlow(data.designerJson);// 在设计面板中显示流程图
                areaFlow.value = myDesigner.getFlowData();
            },
            error:function(data){
                layer.alert(JSON.stringify(data.responseText), {
                    title: "信息"
                });
            }
        });
    }

    /**
     * 创建步骤
     */
    var doCreateStep = function () {
        if(!myDesigner) return;

        myDesigner.createStep();
    };

    /**
     * 保存设计图中的数据
     */
    function saveDesigner(){
     var errMsg = myDesigner.checkData();
     if(errMsg){
         layer.msg(errMsg);
         return;
     }

      areaFlow.value = myDesigner.getFlowData();
        var data ={};
        data.id = getQueryString("id");
        data.designerJson = myDesigner.getFlowData();
            $.ajax({
            url: window.url + "api/jobflowjson" ,
            type:"post",
            contentType:'application/json',
            data: JSON.stringify(data),
            success:function(data){
                // myDesigner.displayFlow(data.designerJson);// 在设计面板中显示流程图
                layer.msg(data.msg);
            },
            error:function(data){
                layer.alert(JSON.stringify(data.responseText), {
                    title: "信息"
                });
            }
        });
    };

    function showJobFlowJson() {
        var errMsg = myDesigner.checkData();
        if(errMsg){
            layer.msg(errMsg);
            return;
        }
        areaFlow.value = myDesigner.getFlowData();
        var data = {};
        data.id = getQueryString("id");
        data.designerJson = areaFlow.value;
        $.ajax({
            url: window.url + "api/showjobflowjson"  ,
            type:"post",
            dataType:'json',
            contentType:'application/json',
            data: JSON.stringify(data),
            // data: "id="+ getQueryString("id") + "&json=" + encodeURI(areaFlow.value),
            success:function(data){
                $("#showJsonTextarea").val(data.msg);
                // myDesigner.displayFlow(data.designerJson);// 在设计面板中显示流程图
                layer.open({
                    type: 1,
                    title: "查看流程JSON",
                    area: ['50%','80%'],
                    content: $('#showJsonContent'),
                    success: function () {
                    }
                })
            },
            error:function(data){
                layer.alert(JSON.stringify(data.responseText), {
                    title: "流程JSON"
                });
            }
        });
    }

    function doEditForm() {
        myDesigner.doEditForm();
    }

    function doCloseForm() {
        myDesigner.doCloseForm();
    }

    function getQueryString(name) {
        let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        let r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return decodeURIComponent(r[2]);
        };
        return null;
    }
</script>
</html>
